<template>
  <div class="player" :class="{ mini: !expanded }">
    <div class="mini-player" @click="expanded = true">
      <img 
        :src="currentSong?.album?.picUrl || currentSong?.picUrl" 
        :alt="currentSong?.name"
        class="cover"
      >
      <div class="info">
        <div class="name">{{ currentSong?.name || '未播放' }}</div>
        <div class="artist">{{ currentSong?.artists?.map(a => a.name).join(' / ') }}</div>
      </div>
      <div class="controls">
        <button class="prev" @click.stop="prev">
          <i class="icon-prev"></i>
        </button>
        <button class="play" @click.stop="togglePlay">
          <i :class="playing ? 'icon-pause' : 'icon-play'"></i>
        </button>
        <button class="next" @click.stop="next">
          <i class="icon-next"></i>
        </button>
      </div>
    </div>

    <div v-show="expanded" class="full-player">
      <div class="header">
        <button class="minimize" @click="expanded = false">
          <i class="icon-minimize"></i>
        </button>
      </div>

      <div class="main">
        <div class="left">
          <div class="cover-wrapper">
            <img 
              :src="currentSong?.album?.picUrl || currentSong?.picUrl" 
              :alt="currentSong?.name"
              class="cover"
            >
          </div>
        </div>

        <div class="right">
          <div class="song-info">
            <h2>{{ currentSong?.name }}</h2>
            <p>
              歌手：
              <router-link 
                v-for="artist in currentSong?.artists"
                :key="artist.id"
                :to="`/artist/${artist.id}`"
                class="artist-link"
              >
                {{ artist.name }}
              </router-link>
            </p>
            <p v-if="currentSong?.album">
              专辑：
              <router-link 
                :to="`/album/${currentSong.album.id}`"
                class="album-link"
              >
                {{ currentSong.album.name }}
              </router-link>
            </p>
          </div>

          <div class="lyric">
            <Lyric 
              :lyric="lyric"
              :current-time="currentTime"
            />
          </div>
        </div>
      </div>

      <div class="controls">
        <div class="progress-bar">
          <span class="time current">{{ formatTime(currentTime) }}</span>
          <div 
            class="progress" 
            @click="handleProgressClick"
            ref="progressRef"
          >
            <div 
              class="progress-inner"
              :style="{ width: `${progress}%` }"
            ></div>
          </div>
          <span class="time duration">{{ formatTime(duration) }}</span>
        </div>

        <div class="buttons">
          <button class="mode" @click="toggleMode">
            <i :class="`icon-${mode}`"></i>
          </button>
          <button class="prev" @click="prev">
            <i class="icon-prev"></i>
          </button>
          <button class="play" @click="togglePlay">
            <i :class="playing ? 'icon-pause' : 'icon-play'"></i>
          </button>
          <button class="next" @click="next">
            <i class="icon-next"></i>
          </button>
          <button class="playlist" @click="showPlaylist = true">
            <i class="icon-playlist"></i>
          </button>
        </div>

        <div class="volume">
          <i class="icon-volume"></i>
          <div class="volume-bar">
            <div 
              class="volume-inner"
              :style="{ width: `${volume * 100}%` }"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 播放列表 -->
    <div v-if="showPlaylist" class="playlist-panel">
      <div class="playlist-header">
        <h3>播放列表 ({{ playlist.length }})</h3>
        <button @click="clearPlaylist">清空</button>
      </div>
      <div class="playlist-content">
        <div 
          v-for="song in playlist" 
          :key="song.id"
          :class="['playlist-item', { active: currentSong?.id === song.id }]"
          @click="play(song)"
        >
          <span class="name">{{ song.name }}</span>
          <span class="artist">{{ song.artists?.map(a => a.name).join(' / ') }}</span>
          <button 
            class="remove"
            @click.stop="removeFromPlaylist(song.id)"
          >
            <i class="icon-remove"></i>
          </button>
        </div>
      </div>
      <div class="playlist-footer">
        <button @click="showPlaylist = false">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { storeToRefs } from 'pinia'
import { usePlayerStore } from '@/stores/player'
import Lyric from './Lyric.vue'

const store = usePlayerStore()
const {
  currentSong,
  playlist,
  playing,
  currentTime,
  duration,
  volume,
  mode,
  progress
} = storeToRefs(store)

const expanded = ref(false)
const showPlaylist = ref(false)
const progressRef = ref<HTMLElement>()
const audio = ref<HTMLAudioElement>()

// 格式化时间
const formatTime = (time: number) => {
  const minutes = Math.floor(time / 60)
  const seconds = Math.floor(time % 60)
  return `${minutes}:${seconds.toString().padStart(2, '0')}`
}

// 进度条点击
const handleProgressClick = (e: MouseEvent) => {
  if (!progressRef.value) return
  const rect = progressRef.value.getBoundingClientRect()
  const percent = (e.clientX - rect.left) / rect.width
  store.setProgress(percent * 100)
  if (audio.value) {
    audio.value.currentTime = percent * duration.value
  }
}

// 创建音频元素
onMounted(() => {
  audio.value = new Audio()
  
  // 监听音频事件
  audio.value.addEventListener('timeupdate', () => {
    if (audio.value) {
      currentTime.value = audio.value.currentTime
    }
  })
  
  audio.value.addEventListener('ended', () => {
    store.next()
  })
  
  audio.value.addEventListener('canplay', () => {
    if (audio.value) {
      duration.value = audio.value.duration
    }
  })
})

// 监听播放状态变化
watch(playing, (newPlaying) => {
  if (!audio.value || !currentSong.value?.url) return
  if (newPlaying) {
    audio.value.play()
  } else {
    audio.value.pause()
  }
})

// 监听当前歌曲变化
watch(currentSong, (newSong) => {
  if (!audio.value || !newSong?.url) return
  audio.value.src = newSong.url
  if (playing.value) {
    audio.value.play()
  }
})

// 监听音量变化
watch(volume, (newVolume) => {
  if (!audio.value) return
  audio.value.volume = newVolume
})

// 清理
onUnmounted(() => {
  if (audio.value) {
    audio.value.pause()
    audio.value = undefined
  }
})

// 方法代理
const { 
  togglePlay, 
  next, 
  prev, 
  toggleMode,
  play,
  removeFromPlaylist,
  clearPlaylist
} = store
</script>

<style scoped>
.player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.1);
  z-index: 100;
}

/* Mini播放器样式 */
.mini-player {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  height: 60px;
}

.mini-player .cover {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 12px;
}

.mini-player .info {
  flex: 1;
  min-width: 0;
}

.mini-player .name {
  font-size: 14px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-player .artist {
  font-size: 12px;
  color: #666;
}

.mini-player .controls {
  display: flex;
  gap: 16px;
}

/* 完整播放器样式 */
.full-player {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.full-player .header {
  padding: 20px;
  text-align: right;
}

.full-player .main {
  flex: 1;
  display: flex;
  padding: 0 40px;
}

.full-player .left {
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.full-player .cover-wrapper {
  width: 300px;
  height: 300px;
}

.full-player .cover {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.full-player .right {
  flex: 1;
  padding: 40px;
}

.song-info h2 {
  font-size: 24px;
  margin-bottom: 16px;
}

.song-info p {
  margin-bottom: 8px;
  color: #666;
}

.artist-link,
.album-link {
  color: var(--primary-color);
  text-decoration: none;
}

.controls {
  padding: 20px 40px 40px;
}

.progress-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.progress {
  flex: 1;
  height: 4px;
  background: #eee;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.progress-inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--primary-color);
  border-radius: 2px;
}

.time {
  font-size: 12px;
  color: #999;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 20px;
}

.volume {
  display: flex;
  align-items: center;
  gap: 8px;
}

.volume-bar {
  width: 100px;
  height: 4px;
  background: #eee;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.volume-inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--primary-color);
  border-radius: 2px;
}

/* 播放列表面板样式 */
.playlist-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.playlist-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.playlist-content {
  flex: 1;
  overflow-y: auto;
}

.playlist-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
}

.playlist-item:hover {
  background: #f5f5f5;
}

.playlist-item.active {
  color: var(--primary-color);
}

.playlist-item .name {
  flex: 1;
  margin-right: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-item .artist {
  width: 120px;
  color: #666;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-footer {
  padding: 20px;
  text-align: center;
  border-top: 1px solid #eee;
}

button {
  padding: 6px 12px;
  border: none;
  background: none;
  cursor: pointer;
  color: #666;
}

button:hover {
  color: var(--primary-color);
}
</style> 